<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html2canvas插件将页面内容转换为图片</title>
    <script src="js/jquery-1.11.1.min.js?v=1" type="text/javascript"></script>
    <script src="js/html2canvas.js" type="text/javascript"></script>
    <style type="text/css">
        #capture{width: 300px;height:300px;position:relative;}
        h4{width:150px;height:150px;position:absolute;top:50px;left:50px;background-size:100% 100%;}
        #img{width: 300px;height:300px;}
        .canvas{}
    </style>
</head>
<body>
<div id="capture" style="padding: 10px;">
    <h4 style="color: #000; ">Hello world!</h4>
</div>
<img id="img" src="" alt=""/>
<div class="canvas"></div>
<script type="text/javascript">
    html2canvas(document.getElementById("capture"),{scale:2}).then(function(canvas) {
        $(".canvas").html(canvas);
        var dataURL = canvas.toDataURL("image/png");
        $("#img").attr("src",dataURL);
    });
</script>
</body>
</html>